<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--引入easyui的样式 -->
<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css">
<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/themes/icon.css">
<!-- js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="role.json"></script>
</head>
<script type="text/javascript">
$(function(){
	//更改底部工具栏 getPager返回页面对象
	var pager = $('#FuncList').datagrid('getPager');	
	  pager.pagination({
		pageList: [10,20,30],
	});
})	
//删除用户信息
  function deluser(){
	//获取被选中需要删除的数据
	 var data = $("#FuncList").datagrid('getSelections');
	 if(data.length==0){
		 $.messager.show({
				title:'警告',
				msg:'请选中需要删除的数据',
				timeout:1000,
				showType:'slide',
			    style:{
						top:'100',						
					}
			});
	 }else{
	      //声明一个空的数组 装选中的uid
	      var uids = [];
	      for (var i = 0; i < data.length; i++) {
			uids.push(data[i].uid);
		}
	$.messager.confirm('确认对话框', '您确认删除选中的'+data.length+'条数据吗？', function(r){
	    		if (r){
	    		    //通过ajax请求将对应数据发送到后台中
	    		    $.ajax({
	    		    	type:"post",
	    		    	url:'delUser',
	    		    	data:{"uids":uids},
	    		    	dataType:"text",
	    		    	success:function(data){
	    		    		if(data=="1"){
	    		    			//提示删除成功
	    		    			$.messager.alert('提示','删除成功','info',function(){
	    		    				$("#FuncList").datagrid('reload');
	    		    			});  
	    		    		}else{
	    		    			//提示删除失败
	    		    			$.messager.alert('提示','删除失败'); 
	    		    		}
	    		    	}
	    		    });
	    		}else{
	    			$("#FuncList").datagrid('uncheckAll');
	    		}
	    	});
	 }
}
//显示添加用户信息框
function showuser(){
	$("#adduser").dialog("open").dialog('setTitle', '添加用户');
}
//获取添加下拉列表中option的id和文本值
/** $(function(){
	$('#addcc').combobox({    
	    url:'role.json',    
	    valueField:'id',    
	    textField:'text',
	    onSelect:function(record){
	    	$.ajax({
	    		type:"post",
	    		url:"roles",
	    		data:{"role":record}
	    	});
	    }
	}); 
});*/

//确认添加学生信息
function addusers(){
//获得新增窗口内输入的文本框的值
var user = new Object();
user.role = $("#role").val(); 
user.uname = $("#uname").val();
user.upsw = $("#upsw").val();
user.name = $("#name").val();
user.age = $("#age").val();
user.sex = $("#sex").val();
var json = JSON.stringify(user);
//通过ajax请求将对应数据发送到后台中
$.ajax({
	type:"post",
	url:"addUser",
	data:{"user":json},
	dataType:"text",
	success:function(data){
		if(data=="true"){
			$.messager.alert('提示','添加成功','info',function(){
				//刷新页面，关闭窗口，清除表单内容
				$("#FuncList").datagrid('reload');
				$('#adduser').dialog('close');
				$('#fm').form('clear');	
			});
		}else{
			$.messager.alert('提示','添加失败');
		}
	}
});
};
//显示修改用户信息框
function updateuser(){
	//获取被选中需要修改的数据
	 var row = $("#FuncList").datagrid('getSelections');
	 if(row.length == 1){
			//将选中的行数据放到更改窗口中 
			$("#updateuser").dialog("open").dialog('setTitle', '修改用户');
			$("#frole").val(row[0].role);
	        $("#fname").val(row[0].name);
		    $("#fage").val(row[0].age);
		    $("#fsex").val(row[0].sex);
		    $("#funame").val(row[0].uname);
		    $("#fupsw").val(row[0].upsw);	
	     }else{
		     $.messager.show({
			  	title:'警告',
				msg:'请选中一行进行修改！',
				timeout:1000,
				showType:'slide',
			    style:{						
						top:'100',						
					}
			});
		}
	 }
//确认修改用户信息
function updateusers(){
	//获得修改后的文本框的值
	var user = new Object();
	user.role = $("#frole").val();
	user.name = $("#fname").val();
	user.age = $("#fage").val();
	user.sex = $("#fsex").val();
	user.uname = $("#funame").val();
	user.upsw = $("#fupsw").val();
	var json = JSON.stringify(user);
	      $.messager.confirm('确认对话框', '您确认修改选中的数据吗？', function(r){
	    		if (r){
	    		    //通过ajax请求将对应数据发送到后台中
	    		    $.ajax({
	    		    	type:"post",
	    		    	url:'updateUser',
	    		    	data:{"user":json},
	    		    	dataType:"text",
	    		    	success:function(data){
	    		    		if(data=="true"){
	    		    			//提示修改成功
	    		    			$.messager.alert('提示','修改成功','info',function(){
	    		    				$("#FuncList").datagrid('reload');
	    		    				$('#updateuser').dialog('close');
	    		    				$('#ff').form('clear');		
	    		    			});  
	    		    		}else{
	    		    			//提示修改失败
	    		    			$.messager.alert('提示','修改失败'); 
	    		    			$('#ff').form('clear');	
	    		    		}
	    		    	}
	    		    });
	    		}else{
	    			$("#FuncList").datagrid('onCheck');
	    		}
	    	});
}
//搜索
$(function(){
	$('#search').searchbox({
	    searcher:function(value){
	   	$.ajax({
	   		type:"post",
	    	url:'searchUser',
	    	data:{"uservalue":value},
	    	dataType:"json",
	    	success:function(data){    	
	    		$('#FuncList').datagrid('loadData',data);
	    	}
	   	})
	    }   
	})
})
</script>
<body>
	 <table id="FuncList" title="用户信息展示" class="easyui-datagrid"
            toolbar="#toolbar" pagination="true" fit="true" pageSize="10"
            url="selectUser" striped = "true"
            rownumbers="true" fitColumns="true" border="false">
        <thead>
            <tr>
                <th field="ck" checkbox=true></th>
                <th field="uid" fixed="false" hidden="true">用户ID</th>
                <th field="role" width="50" resizable="false">用户类型</th>
                <th field="uname" width="50" resizable="false">用户账号</th>
                <th field="upsw"  width="50" resizable="false">用户密码</th>
                <th field="aid" fixed="false" hidden="true">管理员ID</th>
                <th field="tid" fixed="false" hidden="true">老师ID</th>
                <th field="sid" fixed="false" hidden="true">学生ID</th>
                <th field="name"  width="50" resizable="false">用户名字</th>
                <th field="age"  width="50" resizable="false">用户年龄</th>
                <th field="sex"  width="50" resizable="false">用户性别</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="showuser()">增加</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="updateuser()">修改</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deluser()">删除</a>
        <input id="search" class="easyui-searchbox"  style="width:100px" data-options="prompt:'请输入关键字'">
    </div>
    
     <!-- 添加用户信息框 --> 
    <div id="adduser" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px;"
       closed="true" buttons="#dlg-buttons">
       <div class="ftitle">
          <h3>添加用户信息框</h3>
       </div>
       <form id="fm" method="post">
       <div class="fitem">
           <label>用户类型</label>
           <input id="role" class="easyui-textbox" />

           <!-- 用户身份类型下拉列表框
            <select id="addcc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text'"style="width:150px;">
                <option></option>
                <option></option>
                <option></option>    
           </select> 
                  -->
     
       </div>
       <div class="fitem">
           <label>用户账号</label>
           <input id="uname" class="easyui-textbox" />
       </div>
        <div class="fitem">
           <label>用户密码</label>
           <input id="upsw" class="easyui-textbox" />
       <div class="fitem">
           <label>用户名字</label>
           <input id="name" class="easyui-textbox" />
       </div>
       <div class="fitem">
           <label>用户年龄</label>
           <input id="age" class="easyui-textbox" />
       </div> 
       <div class="fitem">
           <label>用户性别</label>
           <input id="sex" class="easyui-textbox" />
       </div>
       </form>
   </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addusers()" iconcls="icon-save">添加</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#adduser').dialog('close')"
            iconcls="icon-cancel">取消</a>
    </div> 
    
  <!-- 修改用户信息框 --> 
    <div id="updateuser" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px;"
       closed="true" buttons="#dlg-buttons">
       <div class="ftitle">
          <h3>修改用户信息框</h3>
       </div>
       <form id="ff" method="post">
       <div class="fitem">
           <label>用户类型</label>
           <input id="frole" class="easyui-vlidatebox" />
         <!--  <select id="updatecc" class="easyui-combobox" name="dept" style="width:150px;">
                <option>管理员</option>
                <option>老师</option>
                <option>学生</option>
           </select> -->  
       </div>
       <div class="fitem">
           <label>用户账号</label>
           <input id="funame" class="easyui-vlidatebox" />
       </div>
        <div class="fitem">
           <label>用户密码</label>
           <input id="fupsw" class="easyui-vlidatebox" />
       <div class="fitem">
           <label>用户名字</label>
           <input id="fname" class="easyui-validatebox" />
       </div>
       <div class="fitem">
           <label>用户年龄</label>
           <input id="fage" class="easyui-validatebox" />
       </div> 
       <div class="fitem">
           <label>用户性别</label>
           <input id="fsex" class="easyui-validatebox" />
       </div>
       </div>
       </form>
   </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="updateusers()" iconcls="icon-save">确认修改</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#updateuser').dialog('close')"
            iconcls="icon-cancel">取消</a>
    </div> 
    </div> 
</body>
</html>